<template>
  <div class="user_header" :style="{backgroundImage: `url(${background_image})`}">
    <van-icon name="set" class="user_set" @click="toSetting" />
    <div class="user_avatar">
      <img :src="avatar" @click="toLogin" alt="头像" width="55" height="55">
    </div>
    <div>{{nick_name}}</div>
  </div>
</template>

<script>
import avatar_default from "../../assets/images/avatar_default.png";
import bg_default from "../../assets/images/user_head_bg.png";
export default {
  name: "user-header",
  data() {
    return {
      nick_name: "昵称",
      avatar: avatar_default,
      background_image: bg_default
    };
  },
  methods: {
    getUserinfo() {},
    toLogin() {},
    toSetting() {}
  }
};
</script>


<style lang="scss" scoped>
.user_header {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

i.user_set {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
.user_avatar {
  margin-bottom: 10px;
  img {
    border: 0;
    border-radius: 50%;
  }
}
</style>
